import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useAsiderStore = defineStore('asider', () => {
    const isCollapse = ref(false) 
    const width = ref('200px')
    const activeIndex = ref('base')
    const editableTabsValue = ref('layout.aside.base')
    const editableTabs = ref([{ title: 'layout.aside.base', name: 'base' }])
    const changeWidth = () => {
        isCollapse.value = !isCollapse.value
        if (isCollapse.value) {
            width.value = '68'
        } else {
            width.value = '200'
        }
    }
    // 重置标签
    const resetTab = () => {
        activeIndex.value = 'layout.aside.base'
        isCollapse.value = false
        width.value = '200px'
        editableTabsValue.value = 'layout.aside.base'
        editableTabs.value = [{ title: 'layout.aside.base', name: 'base' }]
    }

    const addTableTab = (obj) => {
        // console.log('obj', obj)
        if (editableTabs.value.find(x => x.name == obj.name) == undefined)
            editableTabs.value.push({ title: obj.title, name: obj.name })

    }
    const removeTab = (targetName) => {
        if (targetName == 'menu.dashboard') {
            return false
        } else {
            editableTabs.value = editableTabs.value.filter((tab) => tab.name !== targetName)
            return true
        }
    }
    const getTabRoute=()=>{
        return editableTabs.value.find(x=>x.title == editableTabsValue.value).name
    }


    return {isCollapse,width,activeIndex,editableTabs,editableTabsValue,changeWidth,resetTab,addTableTab,removeTab,getTabRoute}



},
    {
        persist: true,
    },)
